import React, { Component } from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components/native';
import { WebBrowser } from 'expo';

import { colors } from '../../utils/constants';

const Root = styled.Text`
  color: ${ colors.PRIMARY_TEXT_LINK };
  fontSize: 16;
`;

class LinkText extends Component {

  _openURL = () => {
    WebBrowser.openBrowserAsync(this.props.url);
  }

  render() {
    const { text, children, onPressed } = this.props;
    return (
      <Root onPress={() => onPressed ? onPressed() : this._openURL()}>
        { children || text }
      </Root>
    );
  }
}

LinkText.propTypes = {
  url: PropTypes.string,
  text: PropTypes.string,
  onPressed: PropTypes.func,
}

export default LinkText;
